<template>
  	
  <view class="u-table">
	  <!-- 返回按钮 -->
	  <view class="back-btn" @click="goBack">  
	        <image class="back-icon" src="/static/icon/back.png"></image>  
	  </view>
	  <!-- 提示条 -->
	  <u-alert type="warning" title="请退出重新进入" :show-icon="false" :center="true" v-if="isShowTip"></u-alert>
	  <view class="name-price">
		<text class="name">{{lastPage.n}}</text>  
	    <text class="price">￥{{lastPage.p}}</text>  
	  </view>
	  <!-- <view class="orgName">{{lastPage.o}}</view>
	  <view class="street">{{lastPage.s}}</view> -->
	  <view class="orgName">{{lastPage.o}}</view>
	  <view class="sort-and-city-container" >
		   <!-- @click.stop="openAMap(drug.lng,drug.lat,drug.org_name)" -->
	     <!-- 在uni-app中，通常不直接使用$event，而是根据需要传递参数  
	     <!-- 如果你需要点击地址时打开地图，可以在这里调用openAMap方法  -->
	  			<text>地址：{{ lastPage.s }}</text>  
	  			<image class="map-icon" src="/static/icon/map.png"></image> 
	  			<text  class="distance">{{ lastPage.d }}km</text>
	     <!-- 假设你想在这里添加一个按钮来打开地图 -->  
	     <!-- <button @click="openAMap(drug.lng, drug.lat, drug.org_name)">查看地图</button>  -->
	  </view>
	  
	  
	  <!-- <view class="street">{{lastPage.s}}</view> -->
	  
    <!-- <view class="u-table__header">  
      <view class="u-table__cell">列1</view>  
      <view class="u-table__cell">列2</view>  
    </view>  
    <view class="u-table__body">  
      <view class="u-table__row" v-for="(row, index) in tableData" :key="index">  
        <view class="u-table__cell">{{ row.column1 }}</view>  
        <view class="u-table__cell">{{ row.column2 }}</view>  
      </view>  
    </view>  -->
	<view> 
		<uni-table style="padding: 15rpx;" border stripe emptyText="暂无更多数据" >
			<!-- 表头行 -->
			<uni-tr>
			  <uni-th class="_th">药品名称</uni-th>
			  <uni-td class="_td">{{drug.medicine_name}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">药品通用名</uni-th>
			  <uni-td class="_td">{{drug.common_name}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">剂型</uni-th>
			  <uni-td class="_td">{{drug.dosage_form}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">规格</uni-th>
			  <uni-td class="_td">{{drug.specification}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">产地</uni-th>
			  <uni-td class="_td">{{drug.production_place}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">生产厂商</uni-th>
			  <uni-td class="_td">{{drug.manufacturer_name}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">批准文号</uni-th>
			  <uni-td class="_td">{{drug.approval_number}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">单位</uni-th>
			  <uni-td class="_td">{{drug.unit}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">医保编码</uni-th>
			  <uni-td class="_td">{{drug.yb_medicine_code}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">药品价格</uni-th>
			  <uni-td class="_td">{{drug.price}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">所在定点药店名称</uni-th>
			  <uni-td class="_td">{{drug.org_name}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">所在定点药店地址</uni-th>
			  <uni-td class="_td">{{drug.street_addr}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">店内咨询电话</uni-th>
			  <uni-td class="_td">{{drug.contact_phone}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">是否处方药</uni-th>
			  <uni-td class="_td">{{drug.is_rx=0?'否':'是'}}</uni-td>
			</uni-tr>
			<uni-tr>
			  <uni-th class="_th">是否带量采购</uni-th>
			  <uni-td class="_td">{{drug.is_volume_based_purchasing=0?'否':'是'}}</uni-td>
			</uni-tr>
		</uni-table>
	  </view>   
  </view>  
</template>  
  
<script>  
export default {

  onLoad(options) {
	console.log(options)
	this.lastPage = options
	if(options.x==undefined){
	  this.isShowTip=true;
	  return;
	}
	this.fetchDrugDetails(options.x)

    
      // 使用 x 做你想做的事情  
  },
  data() {  
    return {
		lastPage:'',
		drug:[],
		isShowTip:false,
    columns: [
            { title: '姓名', key: 'name' },
            { title: '年龄', key: 'age' },
            { title: '地址', key: 'address' }
          ],
          tableData: [
            { name: '小明', age: 18, address: '上海市' },
            { name: '小红', age: 20, address: '北京市' },
            { name: '小强', age: 22, address: '深圳市' }
          ],
    };
  },
  methods: {
  	goBack() {  
  	      uni.navigateBack({  
  	        delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页  
  	      });  
  	},
	fetchDrugDetails(value){
		console.log(value)
		let url = '/ypbj/getDetailById';
		    // 如果 queryParams 不为空，则将其添加到 URL  
		    if (value) {  
		        url += '?medicineId='+value;  
		    }  
		this.$http.get(url).then(res=>{
			console.log("res::",res)
		  this.drug = res.data.data
		})  
	},
	openAMap(a,b,c) {
	  const url = 'http://uri.amap.com/navigation?to='+a+','+b+','+c+'&mode=car&src=nyx_super;';
	  window.open(encodeURI(url),'_black');
	},
	
  },
};  
</script>  

  
<style scoped>
.container {  
  display: flex;  
  flex-direction: column;  
  /* 其他容器样式 */  
}  
  
.back-btn {  
  display: flex;  
  align-items: center;  
  justify-content: flex-start;  
  padding: 10px 5px; /* 内边距 */  
  background-color: #00aaff; /* 背景色 */  
  color: white; /* 文本颜色 */  
  height: 44px; /* 高度，可以根据需要调整 */  
  width: 100%; /* 宽度占满整行 */  
  position: sticky; /* 如果需要固定在顶部 */  
  top: 0; /* 如果需要固定在顶部 */  
  z-index: 999; /* 提高层级，确保显示在其他内容之上 */  
}  
  
.back-icon {
  width: 20px; /* 图标宽度 */  
  height: 20px; /* 图标高度 */  
  margin-right: 10px; /* 图标与文本之间的间距 */  
}  
.name-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5rpx;
  padding: 20rpx;
  color: #000000;
  font-weight: bold;
  font-size: 35rpx;
}	
.u-table{
	background-color: azure;
}
.orgName{
	padding-left: 20rpx;
	color: #98a6af;
	font-size: 30rpx;
}
.street{
	padding-left: 20rpx;
	color: #98a6af;
	margin-bottom: 10rpx;
}
._th{
	background-color: #c9cde5;
	color: #000000;
	font-size: 25rpx;
	padding: 12rpx;
	width: 25%;
}
._td{
	color: #000000;
	font-size: 25rpx;
	padding: 12rpx;
}
.sort-and-city-container {  
  display: flex;  
  flex-direction: row;  
  align-items: center; 
  font-size:30rpx;
  color: #98a6af;
  margin-top: 10rpx;
  padding-left: 20rpx;
}
.sort-and-city-container > :first-child {
  width: 80%; /* 第一个元素宽度为70% */
}

.sort-and-city-container > :last-child {
  width: 20%; /* 第二个元素宽度为30% */
}
.map-icon{
	width: 20px; /* 图标宽度 */
	height: 20px; /* 图标高度 */  
	margin-right: 10px; /* 图标与文本之间的间距 */  
}
.price{
	color: #ffaa00;
	font-size: 40rpx;
}
</style>